<template>
	<div :class="prefixCls" v-if="iconArr.length >= 2">
		<icon-font v-if="iconArr[0] == 'iconfont'" :type="iconArr[1]"></icon-font>
		<antd-icon v-else-if="iconArr[0] == 'antd'" :icon="iconArr[1]">{{ iconArr[1] }}</antd-icon>
		<Icon v-else :icon="icon"></Icon>
	</div>
	<span v-else></span>
</template>
<script lang="ts">
import { useDesign } from '@/hooks/web/useDesign';
import { defineComponent, PropType, unref } from 'vue';
import Icon from './Icon.vue';
import { Icon as AntdIcon } from './AntdIcon';
import IconFont from './IconFont';

/**
 * @example antd:xxx | iconfont:xxx
 */
export default defineComponent({
	name: 'BasicIcon',
	components: { AntdIcon, IconFont, Icon },
	props: {
		icon: {
			type: String as PropType<string>,
			default: null,
			required: true,
		},
	},
	setup(props) {
		const { prefixCls } = useDesign('basic-icon');
		const { icon } = unref(props);

		const iconArr = icon?.split(':') || [];

		return {
			prefixCls,
			iconArr,
		};
	},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-basic-icon';

.@{prefix-cls} {
	display: inline-block;
	margin-right: 3px;
}
</style>
